<template>
	<view :style="{minHeight:heightbody+'px'}"  class="grey text " :class="$tm.vx.state().tmVuetify.black ? 'grey-darken-6 bk' : ''">
		<tm-menubars  color="primary" title="搜索TMUI组件库" :shadow="0"></tm-menubars>
		<view>
			<view class="fixed fulled  overflow" style="z-index: 8;">
				<tm-search
				@confirm="searchKey"
					v-model="keyword"
					suffixIcon=" "
					:showRight="false"
					:fllowTheme="false"
					color="white"
					:bg-color="$tm.vx.state().tmVuetify.color || 'primary'"
					:insertColor="$tm.vx.state().tmVuetify.color || 'primary'"
					:round="4"
					placeholder="组件中英文名的关键词"
					:shadow="0"
				>
					<template #suffixIcon>
						<view @click="searchKey"><tm-tags dense color="primary" model="text">搜索组件</tm-tags></view>
					</template>
				</tm-search>
			</view>
			<view style="height: 90rpx;"></view>
		</view>
		
		<view v-if="jieguo.length>0" class="pa-32">
			<view @click="openUrl(item)" v-for="(item,index) in jieguo" :key="index" :class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-4 bk' : '']" class="white pa-24 round-4 mb-8 flex-between">
				<view>{{item.text}}</view>
				<view > <tm-tags dense model='text'>{{item.url.split('/')[1]}}</tm-tags> </view>
			</view>
		</view>
		<tm-empty v-if="jieguo.length<=0"  icon="icon-box" label="没有数据,组件中的英文或者中文名称的关键词"></tm-empty>
		<tm-dialog v-model="show" title="提醒" content="因小程序大小限制，本demo页面过大，主体导入的js超过2mb，对于分包已无作用，因此如需查询相关demo请前往H5预览，一定是兼容小程序的,不用担心."></tm-dialog>
	</view>
</template>

<script>
	import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
	import tmDialog from '@/tm-vuetify/components/tm-dialog/tm-dialog.vue';
	import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';

	export default {
		components:{tmSearch,tmMenubars,tmTags,tmIcons,tmDialog,tmEmpty},
		data() {
			return {
				heightbody:0,
				keyword:"",
				search:null,
				imdid:659124,
				jieguo:[],
				show:false,
				list:[
					{ text: '文件上传', icon: 'icon-databaseset-fill' ,url:'comtwo/uploadfile',dot:true },
					{ text: '卡片', icon: 'icon-databaseset-fill' ,url:'comtwo/card',dot:true },
					{ text: '宫格排序', icon: 'icon-databaseset-fill' ,url:'comtwo/dragGrid',dot:true },
					{ text: 'canvas渲染引擎', icon: 'icon-databaseset-fill' ,url:'/pages/index/crender',dot:true },
					{ text: '数字翻牌', icon: 'icon-databaseset-fill' ,url:'comtwo/flop',dot:true },
					{ text: '图片裁剪', icon: 'icon-databaseset-fill' ,url:'comtwo/avatarCrop',dot:true },
					{ text: '相册集', icon: 'icon-databaseset-fill' ,url:'comtwo/album',dot:true },
					{ text: '分段器选项', icon: 'icon-databaseset-fill' ,url:'comtwo/segTabs',dot:true },
					{ text: '提示框', icon: 'icon-databaseset-fill' ,url:'comtwo/message',dot:true },
					{ text: '树状结构', icon: 'icon-databaseset-fill' ,url:'comtwo/tree',dot:true },
					{ text: '拖放排序', icon: 'icon-databaseset-fill' ,url:'comtwo/dragList',dot:true },
					{ text: '滑动单元格', icon: 'icon-databaseset-fill' ,url:'comtwo/switchList',dot:true },
					{ text: '地图选点', icon: 'icon-databaseset-fill' ,url:'comtwo/mapSelectedPoint' },
					{ text: '骨架加载器', icon: 'icon-databaseset-fill' ,url:'comtwo/skeleton' },
					{ text: '横向滚动', icon: 'icon-databaseset-fill' ,url:'comtwo/scroll' },
					{ text: '优惠券', icon: 'icon-databaseset-fill' ,url:'comtwo/coupon' },
					{ text: 'lottie动画', icon: 'icon-databaseset-fill' ,url:'lottie/index'},
					{ text: '瀑布流', icon: 'icon-databaseset-fill' ,url:'comtwo/flowLayout',dot:true },
					{ text: '城市索引', icon: 'icon-databaseset-fill' ,url:'comtwo/quickCity',dot:true },
					{ text: '图片校验', icon: 'icon-databaseset-fill' ,url:'comtwo/verificationImg',dot:true },
					{ text: '时间周', icon: 'icon-databaseset-fill' ,url:'comtwo/weekbar',dot:true },
					{ text: '表单', icon: 'icon-databaseset-fill' ,url:'comtwo/form',dot:true },
					{ text: '搜索框', icon: 'icon-databaseset-fill' ,url:'comtwo/search',dot:true },
					{ text: '双向滑块', icon: 'icon-databaseset-fill' ,url:'com/sliders' },
					{ text: '展开更多', icon: 'icon-databaseset-fill' ,url:'com/more' },
					{ text: '表格', icon: 'icon-databaseset-fill' ,url:'com/table' },
					{ text: '帮助提示', icon: 'icon-databaseset-fill' ,url:'com/helpTips' },
					{ text: '内容定位', icon: 'icon-databaseset-fill' ,url:'com/position' },
					{ text: '动画组件', icon: 'icon-databaseset-fill' ,url:'com/translate' },
					{ text: '进度条', icon: 'icon-databaseset-fill',url:'com/propress' },
					{ text: '分页', icon: 'icon-databaseset-fill' ,url:'com/pagination'},
					{ text: '图片', icon: 'icon-databaseset-fill' ,url:'com/images'},
					{ text: '签名板', icon: 'icon-databaseset-fill' ,url:'com/signBoard'},
					{ text: '九宫格', icon: 'icon-databaseset-fill' ,url:'com/grid'},
					{ text: '上拉刷新', icon: 'icon-databaseset-fill' ,url:'com/pullBottom'},
					{ text: '数据空', icon: 'icon-databaseset-fill' ,url:'com/empty'},
					{ text: '加载状态', icon: 'icon-databaseset-fill' ,url:'com/loadding'},
					{ text: '键盘', icon: 'icon-databaseset-fill' ,url:'com/keyborad'},
					{ text: '密码输入框', icon: 'icon-databaseset-fill',url:'com/password' },
					{ text: '评分', icon: 'icon-databaseset-fill',url:'com/rate' },
					{ text: '倒计时', icon: 'icon-databaseset-fill',url:'com/countdown' },
					{ text: '选项卡', icon: 'icon-databaseset-fill' ,url:'com/tabs',dot:true},
					{ text: '时间轴', icon: 'icon-databaseset-fill' ,url:'com/timeline'},
					{ text: '步骤条', icon: 'icon-databaseset-fill' ,url:'com/teps'},
					{ text: '分割线', icon: 'icon-databaseset-fill' ,url:'com/divider'},
					{ text: '步进器', icon: 'icon-databaseset-fill' ,url:'com/stepper'},
					{ text: '动作面板', icon: 'icon-databaseset-fill' ,url:'com/actionSheet'},
					{ text: '快速操作栏', icon: 'icon-databaseset-fill',url:'com/actionSheetMenu' },
					{ text: '下拉选项', icon: 'icon-databaseset-fill',url:'com/dropDownMenu' },
					{ text: '分享面板', icon: 'icon-databaseset-fill' ,url:'com/shareSheet'},
					{ text: '粘性布局', icon: 'icon-databaseset-fill' ,url:'com/sticky'},
					{ text: '纸片', icon: 'icon-databaseset-fill' ,url:'com/tags'},
					{ text: '分类选择', icon: 'icon-databaseset-fill',url:'com/treeSelect'  },
					{ text: '侧边导航', icon: 'icon-databaseset-fill',url:'com/sliderNav' },
					{ text: '对话框', icon: 'icon-databaseset-fill',url:'com/dialog' },
					{ text: '索引', icon: 'icon-databaseset-fill' ,url:'com/quickIndex',dot:true },
					{ text: '轮播', icon: 'icon-databaseset-fill' ,url:'com/swiper'},
					{ text: '黑色遮罩', icon: 'icon-databaseset-fill' ,url:'com/maskFlow'},
					{ text: '填屏', icon: 'icon-databaseset-fill' ,url:'com/fullView'},
					{ text: '消息提示框', icon: 'icon-databaseset-fill',url:'com/alerts' },
					{ text: '头像框', icon: 'icon-databaseset-fill' ,url:'com/avatar'},
					{ text: '徽章/角标', icon: 'icon-databaseset-fill' ,url:'com/badges'},
					{ text: '横幅消息', icon: 'icon-databaseset-fill' ,url:'com/banners'},
					{ text: '导航工具栏', icon: 'icon-databaseset-fill' ,url:'com/bottomnavigation'},
					{ text: '按钮', icon: 'icon-databaseset-fill' ,url:'com/button'},
					{ text: '日历', icon: 'icon-databaseset-fill' ,url:'com/calendar'},
					{ text: '复选框', icon: 'icon-databaseset-fill' ,url:'com/checkbox'},
					{ text: '布局', icon: 'icon-databaseset-fill',url:'com/row' },
					{ text: '悬浮按钮', icon: 'icon-databaseset-fill',url:'com/flotbutton' },
					{ text: '列表', icon: 'icon-databaseset-fill' ,url:'com/listitem'},
					{ text: '单选框', icon: 'icon-databaseset-fill',url:'com/radio' },
					{ text: '图标', icon: 'icon-databaseset-fill' ,url:'com/icons'},
					{ text: '输入框', icon: 'icon-databaseset-fill' ,url:'com/input',dot:true },
					{ text: '弹出菜单', icon: 'icon-databaseset-fill' ,url:'com/menu'},
					{ text: '菜单工具', icon: 'icon-databaseset-fill' ,url:'com/menubars'},
					{ text: '级联选择器', icon: 'icon-databaseset-fill' ,url:'com/pickers',dot:true },
					{ text: '地区选择', icon: 'icon-databaseset-fill' ,url:'com/pickers',dot:true },
					{ text: '日期下拉', icon: 'icon-databaseset-fill',url:'com/pickers' ,dot:true },
					{ text: 'poup', icon: 'icon-databaseset-fill',url:'com/poup',dot:true  },
					{ text: '宽高比', icon: 'icon-databaseset-fill' ,url:'com/ratio'},
					{ text: '基础容器', icon: 'icon-databaseset-fill' ,url:'com/sheet'},
					{ text: '滑块', icon: 'icon-databaseset-fill',url:'com/slider' },
					{ text: '开关', icon: 'icon-databaseset-fill' ,url:'com/switch'},
					{ text: '上传', icon: 'icon-databaseset-fill' ,url:'com/upload' },
				]
			};
		},
		created() {
			let p = uni.getSystemInfoSync();
			this.heightbody = p.windowHeight;
			//  this.$tm.jsSearch.StopWordsMap.bob = false;
			//  this.$tm.jsSearch.StopWordsMap.the = false;
			
			// this.search = new this.$tm.jsSearch.Search('text');
			// this.search.addIndex('url')
			// this.search.addIndex('text')
			// this.search.addDocuments(this.list)
		},
		onLoad(obj) {
			if(obj?.key){
				this.keyword = obj.key
			}
		},
		watch:{
			keyword:function(val){
			
				clearTimeout(this.imdid);
				let t = this;
				
				this.imdid=setTimeout(function() {
					t.searchKey();
				}, 500);
			}
		},
		methods: {
			searchKey() {
				let t = this;
				let p = this.list.filter((el,index)=>{
					let str = el['text'];
					let u = el['url'].split('/');
					let url = u[u.length-1];
					return str.match(new RegExp(`(${t.keyword})`,'g'))||url.match(new RegExp(`(${t.keyword})`,'g'));
				})
				
				this.jieguo	= p
				
			},
			openUrl(item){
				let t = this;
				if(item.url.indexOf('pages')>-1){
					uni.navigateTo({
						url:item.url,
						fail: (e) => {
							t.show = true;
						}
					})
				}else{
					uni.navigateTo({
						url:'/subpages/'+item.url,
						fail: (e) => {
							t.show = true;
						}
					})
				}
				
			},
		},
	}
</script>

<style lang="scss">

</style>
